<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="root" value="<%=request.getContextPath()%>" />
<c:set var="sn" value="<%=request.getServerName()%>" />
<c:set var="sp" value="<%=request.getServerPort()%>" />
<c:set var="localurl" value="http://${sn }:${sp }${root }" />
<c:set var="ws" value="ws://${sn }:${sp }${root }/socket.ws" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>尾矿库监控系统</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript">
	var root = "${root}";
</script>
<link href="${root}/resources/css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="${root}/resources/css/font-awesome.min.css" />
<link rel="stylesheet" href="${root}/resources/css/google-fonts.css" />
<link rel="stylesheet" href="${root}/resources/css/ace.min.css" />
<link rel="stylesheet" href="${root}/resources/css/datepicker.css" />
<link rel="stylesheet" href="${root}/resources/css/jquery.gritter.css" />
<link rel="stylesheet" href="${root}/resources/css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" href="${root}/resources/Jcrop/css/jquery.Jcrop.min.css" type="text/css" />
<link rel="stylesheet" href="${root}/resources/jqueryui/jquery-ui-1.10.0.custom.css" type="text/css" />
<style type="text/css">
.Three-Dee2{
font-family: Garamond, serif;
line-height: 1em;
color: #ffffff;
font-weight:bold;
font-size: 25px;
text-shadow:0px 0px 0 rgb(213,213,213),1px 1px 0 rgb(189,189,189), 2px 2px 0 rgb(165,165,165),3px 3px 2px rgba(0,0,0,0.15),3px 3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);}
.navbar{
	background:green;
}
.Three-Dee2{
	margin-left:150px;
}
.alertTitle {
font-size: 22px;
font-weight: normal;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
margin-top: 20px;
margin-bottom: 10px;
}
</style>
<script src="${root}/resources/js/ace-extra.min.js"></script>
</head>
<body>
	<input id="websocket-servlet" value="${ws }" type="hidden" />
	<div class="navbar navbar-default" id="navbar">
		<script type="text/javascript">
			try {
				ace.settings.check('navbar', 'fixed')
			} catch (e) {
			}
		</script>
		<div class="navbar-container" id="navbar-container">
			<div class="navbar-header pull-left">
				<img alt="" src="${root}/resources/images/logoNew.png" width="50px" height="47px" style="padding-top:0px;padding-bottom:0px;margin-left:20px;">
			</div>
			<a href="javascript:void(0)" class="navbar-brand" style="padding-left:0px"><span class="Three-Dee2" >大唐卫通在线自动监测系统</span></a>
			<div class="navbar-header pull-right" role="navigation">
				<ul class="nav ace-nav">
					<li class="light-blue"><a data-toggle="dropdown" href="javascript:void(0)" class="dropdown-toggle"><img class="nav-user-photo" src="${root}/resources/avatars/avatar2.png" alt="Jason's Photo" /><span
							class="user-info"><small>欢迎您,</small> ${sessionScope['ABKJ-PT-ACCOUNT'].name} </span><i class="icon-caret-down"></i> </a>
						<ul class="user-menu pull-right dropdown-menu dropdown-yellow dropdown-caret dropdown-close">
							<li><a href="javascript:headChangePwdShow();"><i class="icon-user"></i> 修改密码 </a></li>
							<c:if test="${sessionScope['ABKJ-PT-ACCOUNT'].type ==1}">
							<li><a href="javascript:configModal();"><i class="icon-cog"></i> 系统配置 </a></li>
							</c:if>
							<li class="divider"></li>
							<li><a href="${root}/logout"><i class="icon-off"></i> 退出系统 </a></li>
						</ul></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="main-container" id="main-container">
		<script type="text/javascript">
			try {
				ace.settings.check('main-container', 'fixed')
			} catch (e) {
			}
		</script>
		<div class="main-container-inner">
			<jsp:include page="/menu"></jsp:include>
			<div class="main-content">
				<div class="page-content" style="padding: 0px 0px 0px 20px;">
					<div class="row">
						<div class="col-xs-12" style="padding-left: 0px;">
							<div class="position-relative">
								<div id="tabs2">
									<ul>
										<li><a href="#tabs-1" class=" icon-credit-card">&nbsp;首页</a></li>
										<li><a href="#tabs-2" class="icon-globe">&nbsp;尾矿库模拟图</a></li>
										<li id="alarmBtn" style="display:none;" onclick="alarmModal()"><a class="icon-bell">&nbsp;报警信息</a></li>
									</ul>
									<div id="tabs-1" style="padding: 2px 2px 2px 2px;">
										<div id="refesh" class="widget-box-overlay" style="display: none">
											<i class="icon-spinner icon-spin icon-2x white"></i>
										</div>
										<div id="content-container">
											<jsp:include page="/main"></jsp:include>
										</div>
									</div>
									<div id="tabs-2" style="padding: 2px 2px 2px 2px;">
										<%-- <jsp:include page="/map"></jsp:include> --%>

										<div class="widget-box" style="margin-top: 0px; padding-top: 0px">
											<!-- <div class="widget-header widget-header-flat widget-header-small"> -->
											<div class="widget-header header-color-pink">
												<h5>
													<i class="icon-table"></i> 模拟图显示
												</h5>

												<div id="mapbar" class="widget-toolbar no-border">
													<label> <input id="sen_map_1" name="sen_map_check" class="ace ace-radio-2" value="1" type="checkbox"> <span class="lbl"> 渗压计 </span>
													</label> <label> <input id="sen_map_2" name="sen_map_check" class="ace ace-radio-2" value="2" type="checkbox"> <span class="lbl"> 静力水准仪 </span>
													</label> <label> <input id="sen_map_3" name="sen_map_check" class="ace ace-radio-2" value="3" type="checkbox"> <span class="lbl"> 超声波液位仪 </span>
													</label> <label> <input id="sen_map_4" name="sen_map_check" class="ace ace-radio-2" value="4" type="checkbox"> <span class="lbl"> 雨量计 </span>
													</label> <label> <input id="sen_map_5" name="sen_map_check" class="ace ace-radio-2" value="5" type="checkbox"> <span class="lbl"> 位移计 </span>
													</label>
													<div id="uploadDiv" style="display: none;">
														<input accept="image/*" style="display: none" class="col-xs-10 col-sm-5" type="file" name="attach" id="attach" value="" placeholder="上传图片" />
													</div>
													<c:if test="${sessionScope['ABKJ-PT-ACCOUNT'].type ==1}">
													<button id="changeMap" class="btn btn-xs btn-yellow bigger">
														<i class="icon-arrow-left"></i> 更换地图
													</button>
													</c:if>
													<button id="fullBtn_map" class="btn btn-xs bigger btn-yellow dropdown-toggle">
														<i class="icon-pencil"> 全屏显示</i>
													</button>
													<button id="refresh_map" class="btn btn-xs btn-yellow bigger" onclick="">
														<i class="icon-refresh"></i> 刷新
													</button>
												</div>
											</div>

											<div id="bodym" class="widget-body">
												<div id="mapcon">
													<div id="map_index" class="widget-main no-padding" style="position: absolute;">
														<!-- 	模拟图代码加在这里	 -->
													</div>
												</div>
											</div>
											<!--widget-body -->

											<input id="osmometers" type="hidden" value="${osmometers}" /> <input id="levels" type="hidden" value="${levels}" /> <input id="ultrasonics" type="hidden" value="${ultrasonics}" /> <input
												id="rains" type="hidden" value="${rains}" /> <input id="mapurl" type="hidden" value="${mapurl}" />
												<input id="standardval" type="hidden" value="${standardval}" /> <input id="displacements" type="hidden" value="${displacements}" />
										</div>

									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<a href="javascript:void(0)" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"><i class="icon-double-angle-up icon-only bigger-110"></i></a>

		<div class="modal fade" id="changePwdDiv">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h3>密码修改</h3>
					</div>
					<div class="modal-body">
						<fieldset>
							<div class="control-group">
								<label class="control-label" for="selectError">原始密码：</label>
								<div class="controls">
									<input class="input-xlarge focused" style="height: 28px" id="oldpwd" type="password" value=""> <span class="help-inline"> *必填项</span>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="focusedInput">新密码</label>
								<div class="controls">
									<input class="input-xlarge focused" style="height: 28px" id="newpwd" type="password" value=""><span class="help-inline"> *必填项</span>
								</div>
							</div>

							<div class="control-group">
								<label class="control-label" for="focusedInput">确认新密码</label>
								<div class="controls">
									<input class="input-xlarge focused" style="height: 28px" id="newpwd2" type="password" value=""><span class="help-inline"> *必填项</span>
								</div>
							</div>
						</fieldset>
					</div>
					<div class="modal-footer">
						<button type="button" id="changePwdOk" onclick="headChangePwd();" class="btn btn-primary">确定</button>
						<button type="button" onclick="javascript:$('#changePwdDiv').modal('hide');" data-dismiss="modal" class="btn btn-primary">取消</button>
					</div>
				</div>
			</div>
		</div>

		<div class="modal fade" id="configDiv">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h3>系统配置</h3>
					</div>
					<div class="modal-body center">
							<div class="control-group">
								<label class=control-label for="selectError">尾矿名称：
									<input class="input-xlarge focused" style="height: 28px" id="name" type="text" value=""> <span class="help-inline"> *</span>
								</label>
							</div>

							<div class="control-group">
								<label class="control-label" for="focusedInput">选择串口：
									<select name="com" class="input-xlarge focused" id="com"> <!-- col-xs-10 col-sm-5 -->
										<option value="COM1" selected="selected">COM1</option>
									</select> *
								</label>
							</div>
							<div class="control-group">
								<label class="control-label" for="focusedInput">串口速率：
									<select name="rate" class="input-xlarge focused" id="rate"> <!-- col-xs-10 col-sm-5 -->
										<option value="9600" >9600</option>
										<option value="2400" >2400</option>
									</select> *
								</label>
							</div>

							<div class="control-group">
								<label class="control-label" for="focusedInput">巡检周期：
									<select name="scan" class="input-xlarge focused" id="scan"> <!-- col-xs-10 col-sm-5 -->
										<option value="4" >8小时</option>
										<option value="0" >6小时</option>
										<option value="3" >1小时</option>
										<option value="2" >30分钟</option>
										<option value="1" >10分钟</option>
									</select> *
								</label>

							</div>
					</div>
					<div class="modal-footer">
						<button type="button" id="configOk" onclick="saveConfig();" class="btn btn-primary">确定</button>
						<button type="button" onclick="javascript:$('#configDiv').modal('hide');" data-dismiss="modal" class="btn btn-primary">取消</button>
					</div>
				</div>
			</div>
		</div>

	</div>
	<div class="modal fade" id="writeModal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h4 class="modal-title">提示</h4>
				</div>
				<div class="modal-body">
					<h3 class="header smaller lighter grey">
						<i class="icon-spinner icon-spin orange bigger-125"></i> 请稍候...
					</h3>
				</div>
				<div class="modal-footer"></div>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

	<div class="modal fade" data-backdrop="static" id="alarmDiv"> <!-- 报警modal -->
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header"
					style="height: 70px; margin: 5px 0px -20px 10px; padding: 0px 10px 0px 0px;">
					<!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
					<span class="alertTitle">报警</span>
					<span style="float: right;">
					<a href="javascript:alarm2min()"><img alt="" src="${root}/resources/images/min.png"
						width="24px" height="24px"
						style="padding-top: 0px; padding-bottom: 0px; margin-left: 10px;"></a>
					<a href="javascript:alarmClose()"><img alt="" src="${root}/resources/images/cancel.gif"
						width="24px" height="24px"
						style="padding-top: 0px; padding-bottom: 0px; margin-left: 10px;"></a>
					</span>
					<span id="sendId" style="float: right;"></span>
				</div>
				<div class="modal-body center" style="padding: 0px;">
					<!-- <p>报警数据展示表格一行</p> -->
					<table class="table table-striped table-bordered table-hover" style="margin-bottom: -15px;">
						<thead>
							<tr>
								<td class='center'>传感器类型</td>
								<td class='center'>传感器名称</td>
								<td class='center'>传感器状态</td>
								<td class='center'>操作</td>
							</tr>
						</thead>
						<tbody id="alarmtbody">
							<tr>
								<td id="htime" class='center'>渗压计</td>
								<td id="hup" class='center'>渗压计01</td>
								<td id="hdown" class='center'>断线</td>
								<td id="hvalue" class='center'><a href="javascript:showOsmometer();">查看</a></td>
							</tr>
						</tbody>
					</table>
				</div>
				<!-- <div class="modal-footer">
					<button type="button" id="configOk" onclick="saveConfig();" class="btn btn-primary">确定</button>
					<button type="button" onclick="javascript:$('#alarmDiv').modal('hide');" data-dismiss="modal" class="btn btn-primary">取消</button>
				</div> -->
			</div>
		</div>
	</div> <!-- 报警modal -->

	<div class="modal fade" id="registerModal">
			<!-- 状态控制弹出框开始 -->
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
						<h3 class="modal-title">软件使用到期提示</h3>
					</div>
					<div class="modal-body">
						<form class="form-horizontal" id="sendControl">
							<label class="col-sm-12 left">系统使用已到期，输入新的有效激活码之前还能使用<font id="days" size="20">30</font>天！
							</label>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right">输入有效激活码</label>
								<div class="col-sm-9">
									<input class="input-xlarge focused" style="height: 28px" id="serialNumber" type="text" value="">
								</div>
							</div>
						</form>
					</div>
					<div class="modal-footer">
						<button type="button" onclick="serialEnterAjax();" class="btn btn-primary">
							<i class="icon icon-white icon-save"></i>保存激活码
						</button>
						<button type="button" data-dismiss="modal" class="btn btn-primary">
							<i class="icon icon-white icon-undo"></i>残忍的关闭
						</button>
					</div>
				</div>
			</div>
		</div>
		<!-- 状态控制弹出框结束 -->

	<div id="alertSound" style="display: none"></div>

	<!-- basic scripts -->
	<script src="${root}/resources/js/LAB.min.js"></script>
	<script src="${root}/resources/js/jquery-2.0.3.min.js"></script>
	<script src="${root}/resources/js/bootstrap.min.js"></script>
	<script src="${root}/resources/js/ace.min.js"></script>
	<script src="${root}/resources/jqueryui/jquery-ui-1.10.0.custom.min.js"></script>

	<script>
		$LAB.script("${root}/resources/js/typeahead-bs2.min.js").wait().script("${root}/resources/js/ace-elements.min.js").wait().script("${root}/resources/js/bootbox.min.js").wait().script(
				"${root}/resources/js/bootstrap-datepicker.min.js").wait(function() {
			$.fn.datepicker.dates['en'] = {
				days : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ],
				daysShort : [ "周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日" ],
				daysMin : [ "日", "一", "二", "三", "四", "五", "六", "日" ],
				months : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
				monthsShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
				today : "今日",
				suffix : [],
				meridiem : []
			};
		}).script("${root}/resources/js/bootstrap-datetimepicker.min.js").wait(function() {
			$.fn.datetimepicker.dates['en'] = {
				days : [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日" ],
				daysShort : [ "周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日" ],
				daysMin : [ "日", "一", "二", "三", "四", "五", "六", "日" ],
				months : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
				monthsShort : [ "一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月" ],
				today : "今日",
				suffix : [],
				meridiem : []
			};
		}).script("${root}/resources/js/ajaxfileupload.js").wait().script("${root}/resources/js/highstock/highstock.js").wait().script("${root}/resources/myjs/my-StockChart.js").wait().script(
				"${root}/resources/js/jquery.inputlimiter.1.3.1.min.js").wait().script("${root}/resources/js/jquery.validate.min.js").wait().script("${root}/resources/myjs/person.js").wait().script(
				"${root}/resources/js/jquery.gritter.min.js").wait().script("${root}/resources/myjs/my_noty.js").wait().script("${root}/resources/js/jquery.cookie.js").wait().script(
				"${root}/resources/js/jquery.fullscreen.js").wait().script("${root}/resources/jmap/jquery.Jmap.js").wait().script("${root}/resources/Jcrop/js/jquery.Jcrop.min.js").wait().script(
				"${root}/resources/js/common.js").wait().script("${root}/resources/myjs/pt.js").wait().script("${root}/resources/myjs/print.js").wait().script("${root}/resources/myjs/websocket.js").wait();
	</script>
	<script type="text/javascript">
		$('#tabs2').tabs(); // tab页

		function alarm2min(){
			$('#alarmBtn').show();
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		function alarmClose(){
			$('#alarmBtn').hide();
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		
		function headChangePwdShow() {
			resetCPModal();
			$('#changePwdDiv').modal('show');
		}

		function resetCPModal() {
			$('#oldpwd').val('');
			$('#newpwd').val('');
			$('#newpwd2').val('');
		}

		function headChangePwd() {
			if ($('#oldpwd').val() == '' || $('#oldpwd').val() == null) {
				//alert("请输入原始密码！");
				_noty($('#oldpwd'), '请输入原始密码！', 'right', 2000);
				return;
			}
			if ($('#newpwd').val() == '' || $('#newpwd').val() == null) {
				//alert("请输入新密码！");
				_noty($('#newpwd'), '请输入新密码！', 'right', 2000);
				return;
			}
			if ($('#newpwd').val() != $('#newpwd2').val()) {
				//alert("两次输入的新密码不相同！");
				_noty($('#newpwd2'), '两次输入的新密码不相同！', 'right', 2000);
				return;
			}

			ajaxSubmit('/pwd', {
				se : new Date().getTime(),
				pwd : $('#oldpwd').val(),
				newPwd : $('#newpwd').val()
			}, 'post', function(data) {
				if (data == "0") {
					//alert('修改成功!');
					_my_alert('提示', '修改成功！');
					//_noty($('#changePwdOk'),'修改成功！','top',2000);
					$('#changePwdDiv').modal('hide');
				} else {
					_noty($('#changePwdOk'), '修改失败，原始密码输入错误！', 'top', 2000);
				}
			});
		}
	</script>


	<script type="text/javascript">
		var able = '${able}';
		var minute = '${minute}';
	
		var container = $('#map_index');

		// 1-渗压计 2-静力水准仪 3-超声波液位仪 4-雨量计 5-位移计
		var sen_map_index_1 = $('#osmometers').val();
		var sen_map_index_2 = $('#levels').val();
		var sen_map_index_3 = $('#ultrasonics').val();
		var sen_map_index_4 = $('#rains').val();
		var sen_map_index_5 = $('#displacements').val();

		function initMapImage() {
			$('#map_index').empty(); // 清空地图

			var tailingsMap = new Image();
			//tailingsMap.src = $('#mapurl').val()==""?root+"/file/getMap1":$('#mapurl').val();
			tailingsMap.src = root + '/resources/map/map.jpg?random=' + new Date().getTime();
			tailingsMap.onload = function() {
				container.css({
					width : this.width,
					height : this.height
				});
				if ($('#bodym').width() > this.width) {
					$('#mapcon').css({
						'margin-left' : ($('#bodym').width() - this.width) / 2
					});
				}
				container.css('background', 'url("' + this.src + '")'); // 设置地图
			};
		}

		initMapImage();

		var show = function(container, data, type) {
			var json = eval("(" + data + ")");
			for (var i = 0; i < json.length; i++) {
				var sensor = json[i];
				//var _id = sensor.id + '-' + sensor.code;
				var val = (sensor.val==undefined?'':sensor.val);
				var content;
				if (type == 1) { // 渗压计
					val = '水位变化量：'+(sensor.offer*100/9.8).toFixed(2)+'(cm)';
					content = '渗压计';
				} else if (type == 2) { //  静力水准仪
					content = '静力水准仪';
					var standardval = $('#standardval').val();
					if (sensor.type != 1) {
						val = '相对基准点沉降：'+(standardval-sensor.should).toFixed(2) + ' (mm)';
					} else {
						val = '基准点：'+sensor.should.toFixed(2)+' (mm)';
					}
				} else if (type == 5) { //  位移计
					content = '位移计';
					var standardval = $('#displacements').val();
					if (sensor.type != 1) {
						val = '相对基准点沉降：'+(standardval-sensor.should).toFixed(2) + ' (mm)';
					} else {
						val = '基准点：'+sensor.should.toFixed(2)+' (mm)';
					}
				} else if (type == 3) { //  超声波液位仪
					content = '超声波液位仪';
					val = '水位高度：' + (sensor.height-sensor.should).toFixed(2)+'(cm)';
				} else if (type == 4) { //  雨量计
					content = '雨量计';
					val = '雨量计';
				}
				var _id = sensor.code;
				var pxy = sensor.pxy;
				var xy = pxy.split(',');
				//var val =  == -9999 ? '断线' ? sensor.type == 0 : json[i].tvalue : ;
				//var val = tval != -9999 ? sensor.type != 0 ? tval == 0 ? sensor.lowdes : sensor.highdes : tval : '断线';
				var img = new Image();
				var dimg = '<div id="dimg-'+ _id +'" style="position: absolute; left: '+xy[0]+'px; top: '+xy[1]+'px;">'
						+ '<div id="map-sen-val-'+_id+'" class="label-success arrowed arrowed-right" style="font-size: 10px; color: white; text-align: center;">' + val + '</div></div>';
				img.id = 'sen-' + _id;
				img.name = sensor.code;
				/*$(img).css({position : 'absolute', 'left' : sensor.px,'top' : sensor.py});*/
				//setFlagAlarm($(img), sensor);
				$(img).attr('src', root + '/resources/map/' + type + ".png");
				container.append($(dimg));
				$('#dimg-' + _id).prepend(img);
				$(img).attr('data-sid', sensor.id);
				$('#dimg-' + _id).attr('data-rel', 'popover');
				$('#dimg-' + _id).attr('data-original-title', (sensor.code || '-') + ':' + sensor.name);
				$('#dimg-' + _id).attr('data-placement', 'top');// end set show message
				//$('#dimg-' + _id).attr('data-content', sensor.code);
				$('#dimg-' + _id).attr('data-content', content);
				//JSON.stringify(sensor);
				$(img).data('sensor', sensor);

				/*
				 * <span class="btn btn-danger btn-sm tooltip-error" data-rel="popover" data-placement="top"
				 data-original-title="<i class='icon-bolt red'></i> Top Danger"
				 data-content="Oh snap! Change a few things up and try submitting again.">Top</span>

				 */
				$('#dimg-' + _id).mouseover(function() {
					showTip($(this));
				});
				$('#dimg-' + _id).mouseout(function() {
					$(this).popover('hide').popover('destroy');// 鼠标移出测点隐藏信息
				});
				img.ondblclick = function() {
					/* trans2('/mon/modal','模拟图', {
						srctitle: '监测监控-模拟图显示',
						title: '测点实时图',
						sid: $(this).attr('data-sid'),
						type: 1,
						link: '/mon/map'
					}); */
					alert('双击事件');
				};
			}
		};

		// 设置测点图片和提示信息
		/* var setFlagAlarm = function(dom, sensor, tval) {
			var curval = tval | 0, alarmup = sensor.alarmup, alarmdown = sensor.alarmdown;
			if (curval == -9999 || (sensor.type == 1 && sensor.normal != curval) || (curval >= alarmup && alarmup != 0) || (curval <= alarmdown && alarmdown != 0)) {
				dom.attr('src', root + '/resources/map/alarm-flag-2.png');
				// showTip(dom);
			} else {
				dom.attr('src', root + '/resources/map/alarm-flag-0.png');
			}
			dom.attr('data-content', '当前值：' + curval == -9999 ? '断线' : curval + '上控值：' + alarmup + '下控值：' + alarmdown);
		}; */

		var showTip = function(dom) {
			dom.popover({
				title : dom.attr('data-title'),
				content : dom.attr('data-content')
			}).popover('show', 1000);// 测点显示信息
		};

		$("#mapbar input[name='sen_map_check']").click(function() {
			repaintSensor();
		});

		// 选中部分传感器或背景刷新时页面上传感器图片更新
		function repaintSensor() {
			$('#map_index').empty(); // 清空地图
			$("#mapbar input[name='sen_map_check']:checked").each(function() {
				var index = $(this).val();
				if (index == 1) {
					show($('#map_index'), sen_map_index_1, 1);
				} else if (index == 2) {
					show($('#map_index'), sen_map_index_2, 2);
				} else if (index == 3) {
					show($('#map_index'), sen_map_index_3, 3);
				} else if (index == 4) {
					show($('#map_index'), sen_map_index_4, 4);
				} else if (index == 5) {
					show($('#map_index'), sen_map_index_5, 5);
				}
			});
		}
	</script>
	<script type="text/javascript">
		$('#fullBtn_map').click(function(e) {
			if ($.support.fullscreen) {
				($("#map_index")).fullScreen({
					c : true,
					m : true
				});
				e.preventDefault();
			} else {// IE
				// var WshShell = new ActiveXObject('WScript.Shell');
				// WshShell.SendKeys('{F11}');
				alert('IE no work..');
			}
		});

		$('#refresh_map').click(function() {
			initMapImage();
			repaintSensor();
		});

		function mapInputSet() {
			$('#attach').ace_file_input({
				no_file : '请选择...',
				btn_choose : '选择',
				btn_change : '修改',
				droppable : false,
				thumbnail : false
			});
		}

		$('body').delegate('#attach', 'change', function() {
			$.ajaxFileUpload({
				url : root + '/system/saveMapFile?se=' + new Date().getTime(), //需要链接到服务器地址
				secureuri : false,
				fileElementId : 'attach', //文件选择框的id属性
				dataType : 'json', //服务器返回的格式，可以是json
				success : function(data, status) //相当于java中try语句块的用法
				{
					initMapImage();
					$('#uploadDiv').html('<input style="display: none" class="col-xs-10 col-sm-5" type="file" name="attach" value="' + new Date().getTime() + '" id="attach" placeholder="上传图片2" />');
					mapInputSet();
				},
				error : function(XMLHttpRequest, textStatus, errorThrown) {
					alert(XMLHttpRequest.status);
					alert(XMLHttpRequest.readyState);
					alert(textStatus);
				},
				complete : function(XHR, TS) {
					XHR = null
				}
			});
		});

		$('#changeMap').click(function() {
			$('#attach').trigger("click");
		});

		// 矿名字、串口、巡检周期
		function configModal() {
			$('#com').empty();
			var url = '/readConfig';
			ajaxSubmit(url, null, 'post', function(data) { // data : 0 成功 1 串口错误
				var json = eval("(" + data + ")");
				var coms = json.com;
				for(var i=0;i<coms.length;i++) {
					$('#com').append('<option value="'+coms[i]+'">'+coms[i]+'</option>');
				}

				var config = json.config;
				$('#name').val(config.name);
				$('#com').val(config.com);
				$('#scan').val(config.scan);
				$('#rate').val(config.rate);

				$('#configDiv').modal('show');
			});
		}

		function saveConfig() {
			var name = $('#name').val();
			var com = $('#com').val();
			var rate = $('#rate').val();
			var scan = $('#scan').val();
			var url = '/writeConfig';
			ajaxSubmit(url, {name:name,com:com,scan:scan,rate:rate}, 'post', function(data) { // data : 0 成功 1 串口错误
				$('#configDiv').modal('hide');
			});
		}
		
		if(able && able == 'true'){
			if(!minute){
				minute = '5';
			}
			var alarmIntervalId = setInterval(alarmModal, 1000*60*minute); // minute分钟检查一次是否有报警或断线的(渗压计传感器)
		}


		function sendMsg(){
			var url = "/system/sendMsg";
			ajaxSubmit(url, null, 'post', function(data) {
				if(data){
					$('#sendId').html('<span color="gray">[短信已发送]</span>');
				}else{
				}
			});
		}
		function alarmModal() {
			$('#alarmtbody').empty();
			var url = '/read/alarm';
			ajaxSubmit(url, null, 'post', function(data) { // data
				var json = eval('('+data+')');
				var alarms = json.alarms;
				var normal = json.normal;
				var autoAlert = json.autoAlert;
				var len = alarms.length;
				var lenN = normal.length;
				for (var i=0;i<lenN;i++) {
					$('#map-sen-val-'+normal[i]).css("color", "white");
				}
				if (len == 0) { // 无报警或断线
					$('#alertSound').html('');
					$('#alarmDiv').modal('hide');
					return;
				}
				
				if(typeof autoAlert == 'boolean' && !autoAlert){
					if(autoAlert){
						$('#sendId').html('<span color="gray">[短信已发送]</span>');
					}else{
						$('#sendId').html('<a href="javascript:sendMsg()">[发送短信]</a>');
					}
				}
				var bodys;
				for (var i=0;i<len;i++) {
					var state;
					var showjs;
					if (alarms[i].info != 0) {
						state = '断线';
					} else {
						// var tmp = depth - offer*100/9.8; // 浸润线高度
						state = '报警';
						var alertInfo = alarms[i].alertInfo;
						if(alertInfo){
							state += ":"+alertInfo;
						}
					}
					if (alarms[i].typename == '渗压计') {
						showjs = 'showOsmometer();';
					} else if (alarms[i].typename == '静力水准仪') {
						showjs = 'showLevel();';
					} else if (alarms[i].typename == '超声波液位仪') {
						showjs = 'showUltrasonic();';
					} else if (alarms[i].typename == '雨量计') {
						showjs = 'showRain();';
					} else if (alarms[i].typename == '位移计') {
						showjs = 'showDisplacement();';
					} else {
					}
					bodys+= '<tr>'+
					'<td class="center">'+alarms[i].typename+'</td>'+
					'<td class="center">'+alarms[i].name+'</td>'+
					'<td class="center">'+state+'</td>'+
					'<td class="center"><a href="javascript:'+showjs+'">查看</a></td>'+
					'</tr>';
					
					$('#map-sen-val-'+alarms[i].code).css("color", "red");
				}
				$('#alertSound').html('<audio src="'+root+'/resources/media/alert.wav" autoplay="autoplay" loop="loop"></audio>');
				$('#alarmtbody').append(bodys);
				
				
				var state = $('#alarmDiv')[0].style.display;
				if (state == '' || state == 'none') {
					$('#alarmDiv').modal('show');
				}
			});
		}

		/* 数据监测分析-浸润线 */
		function showOsmometer() {
			trans('/analysis/osmometer','数据监测分析-浸润线','nav04','#menu-stati-line');
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		/* 数据监测分析-表面垂直位移 */
		function showLevel() {
			trans('/analysis/level','数据监测分析-表面垂直位移','nav04','#menu-stati-exception');
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		/* 数据监测分析--库水位与干滩 */
		function showUltrasonic() {
			trans('/analysis/ultrasonic','数据监测分析-库水位与干滩','nav04','#menu-stati-total');
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		/* 数据监测分析--降雨量 */
		function showRain() {
			trans('/history/rain','数据监测分析-降雨量','nav04','#menu-stati-rain');
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		/* 数据监测分析--边坡移动距离 */
		function showDisplacement() {
			trans('/analysis/displacement','数据监测分析-边坡移动距离','nav04','#menu-stati-exception');
			$('#alertSound').html('');
			$('#alarmDiv').modal('hide');
		}
		
		function serialOpen() {
			var state = $('#registerModal')[0].style.display;
			if (state == '' || state == 'none') {
				$('#serialNumber').val('');
				$('#registerModal').modal('show');
			}
		}

		function serialAjax() {
			$.getJSON(root + "/auth"+'?random='+Math.random(), function(result) {
				//	console.log(result);
				if (result.ret == 0) {
					$('#days').empty();
					$('#days').append(result.day);
					serialOpen();
				}
			});
		}

		var serialIntervalId = setInterval(serialAjax, 1000*60*3); // 3分钟检查一次激活码是否过期

		function serialEnterAjax() {
			var url = "/authReset";
			var param = "serio=" + $('#serialNumber').val();
			ajaxSubmit(url, param, 'post', function(data) {
				if (data == 0) {// 过期
					alert('激活码验证失败，格式有误！');
				} else {
					$('#registerModal').modal('hide');
				}
			});
		}
		
	</script>
</body>
</html>